<template>
	<view>
		<u-navbar back-text="返回" title="用户注册"></u-navbar>
		<view style="padding: 48rpx; margin-top: 50rpx;">
			<view>
				<text style="font-weight: 500; font-size: 40rpx;">欢迎注册{{site.name}}</text>
			</view>
			<view style="margin-top: 12rpx;">
				<text style="font-weight: 500; font-size: 24rpx; color: #9d9d9d; ">数字智慧乡村 · 互联网+乡村</text>
			</view>
		</view>
		<view style="padding: 48rpx;">
			<view style="background-color: #e7e7e7;border-radius: 44rpx;">
				<u-field v-model="mobile" placeholder="请填写手机" label-width="0"></u-field>
			</view>
			<view style="background-color: #e7e7e7;border-radius: 44rpx;margin-top: 22rpx;" v-if="site.register_verify_mobile == '1'">
				<u-field v-model="vcode" placeholder="请填写短信验证码" label-width="0">
					<u-button size="mini" slot="right" type="success" shape="circle" :disabled="getCodeBtnShow" @click="onClickGetCode">{{tips}}
					</u-button>
				</u-field>
			</view>
			<view style="background-color: #e7e7e7;border-radius: 44rpx; margin-top: 22rpx;">
				<u-field v-model="password" placeholder="请填写密码" label-width="0" :password="showpassword"
					:right-icon="showpassword?'eye':'eye-fill'" @right-icon-click="showpassword=!showpassword">
				</u-field>
			</view>
			<view style="background-color: #e7e7e7;border-radius: 44rpx; margin-top: 22rpx;">
				<u-field v-model="password2" placeholder="请再次填写密码" label-width="0" :password="showpassword"
					:right-icon="showpassword?'eye':'eye-fill'" @right-icon-click="showpassword=!showpassword">
				</u-field>
			</view>
		</view>
		<view class="login" style="padding:0rpx 48rpx;">
			<u-button type="success" @click="onClickRegister()" shape="circle" :custom-style="{padding:'46rpx'}" :disabled="regBtnDisabled">注册
			</u-button>
		</view>


		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
		</u-verification-code>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				getCodeBtnShow: false,
				regBtnDisabled: false,
				showpassword: true,
				site: {},
				mobile: '',
				vcode: '',
				password: '',
				password2: '',
				tips: '',
				// refCode: null,
				seconds: 60,
			}
		},
		onLoad() {
			var that = this;
			uni.request({
				url: this.$unishow + 'api/index/login',
				method: 'GET',
				data: {
					action: 'info'
				},
				success: res => {
					console.log(res);
					that.site = res.data.site;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
			start() {

			},
			end() {
				this.getCodeBtnShow = false;
			},
			codeChange(text) {
				this.tips = text;
			},
			onClickGetCode() {
				this.getCodeBtnShow = true;
				var that = this;
				uni.request({
					url: this.$unishow + 'api/index/getsmsvcode',
					method: 'GET',
					data: {
						mobile: this.mobile
					},
					success: res => {
						if (res.data.code == 1) {
							that.$refs.uCode.start();
							that.$refs.uToast.show({
								title: res.data.msg,
								position: 'bottom'
							})
						} else {
							that.$refs.uToast.show({
								title: res.data.msg,
								position: 'bottom'
							})
							that.getCodeBtnShow = false;
						}
					},
					fail: () => {
						that.getCodeBtnShow = false;
					},
					complete: () => {}
				});
			},
			onClickRegister() {
				var that = this;
				uni.showLoading();
				this.regBtnDisabled = true;
				uni.request({
					url: this.$unishow + 'api/index/register',
					method: 'POST',
					data: {
						mobile:this.mobile,
						vcode:this.vcode,
						password: this.password,
						password2: this.password2,
					},
					success: res => {
						if (res.data.code == 1) {
							that.$refs.uToast.show({
								title: res.data.msg,
								position: 'bottom',
								callback: function(){
									uni.navigateBack();
								}
							})
						} else {
							that.$refs.uToast.show({
								title: res.data.msg,
								position: 'bottom'
							})
						}
						uni.hideLoading()
						that.regBtnDisabled = false;
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #eceef4;
	}
</style>
